import React, { useMemo } from 'react';
import { Tag } from 'antd';

import { CheckScheduleLogStatus } from '@/services/consts';

export type StatusTagProps = {
  status: number | undefined;
};

export const StatusTag: React.FC<StatusTagProps> = (props) => {
  const { status } = props;

  let color = '';
  let text = '';

  switch(status){
    case CheckScheduleLogStatus.Error.value:
      color = '#f50';
      text = CheckScheduleLogStatus.Error.label;
      break;
    case CheckScheduleLogStatus.Run.value:
      color = '#108ee9';
      text = CheckScheduleLogStatus.Run.label;
      break;
    case CheckScheduleLogStatus.Completed.value:
      color = '#87d068';
      text = CheckScheduleLogStatus.Completed.label;
      break;
      case CheckScheduleLogStatus.Timeout.value:
        color = 'black';
        text = CheckScheduleLogStatus.Timeout.label;
        break;
  }

  const renderTag = useMemo(() => {
      return (<Tag color={color}><b>{text}</b></Tag>);
  }, [status]);

  return <>{renderTag}</>;
};


export default StatusTag;
